 
import React,{Component, Fragment} from 'react';
import ReactEcharts from 'echarts-for-react';
import {connect} from 'react-redux';


class TwoDim2Echarts extends Component{
  constructor(props){
    super(props);
    this.handleAddCurve=this.handleAddCurve.bind(this);
    this.getCurve=this.getCurve.bind(this);
    this.getOption=this.getOption.bind(this);
    this.state={
        curState1:[],  
        curState1Name:'',
        curState1Unit:'',
        curState2:[],
        curState2Name:'',
        curState2Unit:'',
        curDepth:[],
        depth:[],
        option:{},
        selectCurveType:""
    }
}
componentWillReceiveProps(nextProps){
  if(nextProps.CurType !==this.props.CurType||nextProps.docdata !==this.props.docdata||nextProps.twoDimData!==this.props.twoDimData){
    this.getCurve();
  }
  if(nextProps.selectedCurve1!==this.props.selectedCurve1||nextProps.selectedCurve2!==this.props.selectedCurve2){
    this.handleAddCurve();
  }
}

componentDidUpdate(prevProps, prevState){
  if(prevState.depth!==this.state.depth){
    let option=this.getOption();
    // console.log("------------",prevState.depth,this.state.depth)
    this.setState({
      option:option
    })
  }
  // if(prevState.curDepth!==this.state.curDepth){
  //   this.setState({
  //     curDepth:this.reduceCurce(this.state.curDepth)
  //   })
  // }
  if(prevState.curState1!==this.state.curState1||prevState.curState2!==this.state.curState2){
    let option=this.getOption();
    this.setState({
      option:option
    })
  }
}
  



  
  getCurve=()=>{
    const docData=this.props.docData;
    this.setState({
      depth:docData.yData
    })
      if(docData.doc_type === '纯数据文件'){
        docData.curves.map((item)=>{
          if(this.props.twoDimData.curveType==='横切切面'){
            if(item.curve_name==='左右偏差'){
              this.setState({
                curDepth:item.xData,
                curState1:[],  
                curState1Name:'',
                curState1Unit:'',
                curState2:[],
                curState2Name:'',
                curState2Unit:'',
                selectCurveType:'左右偏差'
              })
            }
            }else{
              if(item.curve_name==='上下偏差'){
                this.setState({
                  curDepth:item.xData,
                  curState1:[],  
                  curState1Name:'',
                  curState1Unit:'',
                  curState2:[],
                  curState2Name:'',
                  curState2Unit:'',
                  selectCurveType:'上下偏差'
                })
              }

            }
          }
        )      
      }else if(docData.doc_type === '绘图文件'){
        docData.docData.curves.map((item)=>{
          if(this.props.twoDimData.curveType==='横切切面'){
            if(item.curve_name==='左右偏差'){
              this.setState({
                curDepth:item.xData,
                curState1:[],  
                curState1Name:'',
                curState1Unit:'',
                curState2:[],
                curState2Name:'',
                curState2Unit:'',
                selectCurveType:'左右偏差'
              })
            }
            }else{
              if(item.curve_name==='上下偏差'){
                this.setState({
                curDepth:item.xData,
                curState1:[],  
                curState1Name:'',
                curState1Unit:'',
                curState2:[],
                curState2Name:'',
                curState2Unit:'',
                selectCurveType:'上下偏差'
                })
              }

            }
          
        })
      }
    }
  handleAddCurve(){
    const curve_id1=this.props.twoDimData.selectedCurve1;
    const curve_id2=this.props.twoDimData.selectedCurve2;
    const daosDataList1=this.props.daosDataList1;
    let list=[];
      for(let i=0;i<daosDataList1.length;i++){
        if(daosDataList1[i].curves){
        list=list.concat(daosDataList1[i].curves);
        } 
      }
      list.map((item)=>{
        if(item.curve_id===curve_id1){
          this.setState({
            curState1Unit:item.curve_unit
          })
        }else if(item.curve_id===curve_id2){
          this.setState({
            curState2Unit:item.curve_unit
          })
        }
        return item;
      })
    const docData=this.props.docData;
    if(docData.doc_type === '纯数据文件'){
      docData.curves.map((item)=>{
        //两个曲线都存在
        if(curve_id1&&curve_id2&&curve_id1!==curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name
          })
        }else if(curve_id1&&curve_id2&&curve_id1!==curve_id2&&item.curve_id===curve_id2){
          this.setState({
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }else if(curve_id1&&curve_id2&&item.curve_id===curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }
        //只存在一条曲线
        else if(curve_id1&&!curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }else if(!curve_id1&&curve_id2&&item.curve_id===curve_id2){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }
      })
    }else if(docData.doc_type === '绘图文件'){
      docData.docData.curves.map((item)=>{
        //两个曲线都存在
        if(curve_id1&&curve_id2&&curve_id1!==curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name
          })
        }else if(curve_id1&&curve_id2&&curve_id1!==curve_id2&&item.curve_id===curve_id2){
          this.setState({
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }else if(curve_id1&&curve_id2&&item.curve_id===curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }
        //只存在一条曲线
        else if(curve_id1&&!curve_id2&&item.curve_id===curve_id1){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }else if(!curve_id1&&curve_id2&&item.curve_id===curve_id2){
          this.setState({
            curState1:item.xData,
            curState1Name:item.curve_name,
            curState2:item.xData,
            curState2Name:item.curve_name
          })
        }

      })
    }
  }


  //计算缩放范围的函数  
  //initRange  需要缩放范围的曲线  aimRange  目标范围
  calculateZoom = (initRange , aimRange ) => {
    //计算范围 大于 目标范围 
    if(Math.ceil(initRange / aimRange) > 1){
        return Math.ceil(initRange / aimRange )
      }
    
    //目标范围 大于 计算范围 
    else if(Math.ceil(aimRange / initRange) > 1){
        return (initRange / aimRange )
    }
    else{
      return 1;
    }
  }

  //统一曲线正负值
  reduceCurce = (curve) => {
    let tmp_1 ;
    for(let i = 0 ; i < curve.length ;i++ ){
      if(curve[i] >= 0){
        continue;
      }else {
        tmp_1 = false;
      }
    }
    
    //曲线中不是全正
    if(tmp_1==false){
      let min = Math.min.apply(null,curve);
      // console.log("处理前",curve,min)
      return curve.map(item => {
        return item -= min;
      })
    }
    return curve;
  }

  getOption=()=>{
    const {color1,color2,color11} = this.props.twoDimData;
    // console.log(color1,color2)
      // 获取深度值
     //  const depthdata =this.state.curDepth;
     //  console.log(depthdata);
      //获取轨迹中轴线的值
      let midPath=this.reduceCurce(this.state.curDepth) ? this.reduceCurce(this.state.curDepth) : [];
      let data1=this.reduceCurce(this.state.curState1) ? this.reduceCurce(this.state.curState1) : [];
      let data2=this.reduceCurce(this.state.curState2) ? this.reduceCurce(this.state.curState2) : [];

      // console.log("井轨初始曲线",this.state.curDepth,this.reduceCurce(this.state.curDepth))
      //获取轨迹最大最小值
     //  const curminAbs=Math.abs(Math.min.apply(null,midPath));
     //  const curmaxAbs=Math.abs(Math.max.apply(null,midPath));
      
     //1.压缩曲线(0-20)  移动到30-50范围
      const curmin=Math.min.apply(null,midPath);
      const curmax=Math.max.apply(null,midPath);
      let temp=Math.abs(curmax-curmin);

      let zoom_line=this.calculateZoom(temp ,20);
      let midCurve=midPath.map(item => item / zoom_line + 30);
      let midCurve_show=midPath.map(item => item / zoom_line + 32.5);

      
      const min1=Math.min.apply(null,data1);
      const max1=Math.max.apply(null,data1);
      let range_1=Math.abs(max1) > Math.abs(min1) ? Math.abs(max1) : Math.abs(min1);
      // console.log("初始上曲线",data1,max1,min1)
   
      // let  data2=this.state.curState2;
      
      const min2=Math.min.apply(null,data2);
      const max2=Math.max.apply(null,data2);
      let range_2=Math.abs(max2) > Math.abs(min2) ? Math.abs(max2) : Math.abs(min2);
      // console.log("初始下曲线",data2,max2,min2)
   
      //3.1计算缩放比例
      let zoom_1=this.calculateZoom(range_1,30);
      let zoom_2=this.calculateZoom(range_2,30);
    
      // console.log("上曲线缩放倍数,范围",zoom_1,range_1,typeof(zoom_1))
      // console.log("下曲线缩放倍数,范围",zoom_2,range_2,typeof(zoom_2))
   
      //3.2进行缩放并对两条测井曲线进行压缩偏移
      let movedata1=data1.map(item=>parseFloat(((item/zoom_1)).toFixed(2)))
      let movedata2=data2.map(item=>parseFloat(((item/zoom_2)).toFixed(2)))

      //  console.log("处理后上曲线",movedata1)
      //  console.log("处理后下曲线",movedata2)


       let bottomBar=midCurve.map((item,index)=>{
         return parseFloat((item-movedata2[index]).toFixed(2));
       });

      


       //中间曲线道的透明柱
       let midBar=movedata2.map(item=>5);

      //  console.log("底下柱状图",bottomBar)
      //  console.log("下柱状图",movedata2)
      //  console.log("中间曲线",midCurve_show)
      //  console.log("中间柱状图",midBar)
      //  console.log("上柱状图",movedata1)

   
      //用于visualMap 映射的显示的text ,显示原始数据的最大最小值
      let max11=Math.max.apply(null,this.state.curState1);
      let min11=Math.min.apply(null,this.state.curState1);
      let max22=Math.max.apply(null,this.state.curState2);
      let min22=Math.min.apply(null,this.state.curState2);
      // console.log(max11,min11,max22,min22)

       //用户visualMap 映射的处理后的值，用户渲染对应的色柱
      let max_11=Math.max.apply(null,movedata1);
      let min_11=Math.min.apply(null,movedata1);
      let max_22=Math.max.apply(null,movedata2);
      let min_22=Math.min.apply(null,movedata2);

    
     
      const option = {
       grid:[
         {
           top:'25%',
           // height:'20%'
          
         }, 
       ], 
       tooltip:{
        trigger:'item',
        triggerOn:"mousemove",
        formatter: (params ,callback)=>{
          if(params.seriesType==='line'){
            return `<div>${this.state.selectCurveType} : ${this.state.curDepth[params.dataIndex]}</div>`
          }
          else if(params.seriesType==='bar'&&params.seriesName==='上曲线'){
            // console.log(this.state.curState1,this.state.curState2)
            return `<div>${this.state.curState1Name} : ${this.state.curState1[params.dataIndex]}</div>`
          }
          else if(params.seriesType==='bar'&&params.seriesName==='下曲线'){
            // console.log(this.state.curState1,this.state.curState2)
            return `<div>${this.state.curState2Name} : ${this.state.curState2[params.dataIndex]}</div>`
          }else if(params.seriesType==='bar'&&params.seriesName==='中间空白柱'){
            return `<div>${this.state.selectCurveType} : ${this.state.curDepth[params.dataIndex]}</div>`
          }
        }
       },
       legend: {
         data: [
           {
             // name:'曲线一',
             // 强制设置图形为圆。
             // icon: 'circle',
             // 设置文本为红色
             textStyle: {
               color: '#969696'
             }
           },
           {
             // name:this.state.curState2Name,
             // 强制设置图形为圆。
             // icon: 'circle',
             // 设置文本为红色
             textStyle: {
               color: '#969696'
             }
           }
         ]
      },
      grid:{
        top:'5%'
      },

       xAxis: [
         {
           type: 'category',
           data:this.state.depth,
           splitLine:{show:false},
           show:true,
           axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              type: "solid"
            }
          },
           },
        ],
        yAxis: 
       [
         {
           show:false,//隐藏y轴
           type: 'value',
           // splitLine:{show:false},
           axisLine:{
             show:false
           },
           max:85,
           min:0
         } ,
     ],
       dataZoom: 
       [
         {
             type: 'inside',
             realtime: true,
             start: 0,
             end: 100,
             // xAxisIndex: [0, 1]
         }
      ],
       visualMap:[
       {
         top:'8%',
         left:40,
         type:'continuous',
         min: Math.abs(min_11)==Infinity ? 0 : min_11,
         max: Math.abs(max_11)==Infinity ? 30 : max_11,
         hoverLink:false,
         seriesIndex:4,
         color: [color1,color2].flat(Infinity),
         text:[`${Math.ceil(max11)}`,`${parseInt(min11)}`],
         textStyle: {
            color: '#ffffff'
          },
       },
       {
         top:'57%',
         left:40,
         type:'continuous',
         min: Math.abs(min_22)==Infinity ? 0 : min_22,
         max: Math.abs(max_22)==Infinity ? 30 : max_22,
         hoverLink:false,
         seriesIndex:2,
         color: [color1,color2].flat(Infinity),
         text:[`${Math.ceil(max22)}`,`${parseInt(min22)}`],
         textStyle: {
           color: '#ffffff'
         },
       },
       ],
          
       series: [
         {
           data: midCurve_show,
           type: 'line',
           areaStyle:{
             color: 'rgba(0,21,40,0)',    //'white'
             opacity:1
           },
           showSymbol:'circle',
           lineStyle:{
             color:'rgb(165,173,180)'   //  black
           },
           zlevel:2,
           
         },

         {
           data: bottomBar,
           type: 'bar',
           stack: 'bar',
           areaStyle:{color:'#fff'},
           showSymbol:false,
           zlevel:5,
  
           areaStyle:{
             color:'white',
             opacity:1
           },
           itemStyle: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
            },
            emphasis: {
                itemStyle: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                }
            },
          
         },

         {
            name:'下曲线',
            data: movedata2,
            type: 'bar',
            stack: 'bar',
            zlevel:5,
    
            showSymbol:false,
          },


          {
            name:'中间空白柱',
            data: midBar,
            type: 'bar',
            stack: 'bar',
            areaStyle:{color:'#fff'},
            showSymbol:false,
            zlevel:5,
    
            areaStyle:{
              color:'white',
              opacity:1
            },
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
              },
              emphasis: {
                  itemStyle: {
                      barBorderColor: 'rgba(0,0,0,0)',
                      color: 'rgba(0,0,0,0)'
                  }
              },
            },

            
          {
            name:'上曲线',
            data: movedata1,
            type: 'bar',
            stack: 'bar',
            zlevel:5,
            barGap:'-100%'
            
          },
        
         
         
        
       ]
      }
      // console.log(option);
      return option;
    }
     
     
   
  render(){
   
    return(
      <Fragment>
        <div  className='legend' style={{display:'flex',justifyContent:'center',alignItems:'flex-end'}}>
              <div className='showTitle'></div>
              <div style={{width:120,background:'#000000',borderRadius:6,color:'#ffffff',fontSize:20,textAlign:'center',height:50,lineHeight:'50px'}}>上曲线</div>
              <div className='legend1' style={{marginRight:30,marginLeft:10,color:'#ffffff',fontSize:20}}>{this.state.curState1Name }{' '}{this.state.curState1Unit}</div>
              <div  style={{width:120,background:'#000000',borderRadius:6,color:'#ffffff',fontSize:20,textAlign:'center',height:50,lineHeight:'50px'}}>下曲线</div>
              <div className='legend2' style={{marginLeft:10,color:'#ffffff',fontSize:20}}>{this.state.curState2Name }{' '}{this.state.curState1Unit}</div>
        </div>
        <ReactEcharts
          option={this.state.option}
          style={{height:'90%',width:'100%',top:0}}
        />
      </Fragment>
    )
  }
}

// export default TwoDim2Echarts;
export default connect(
  state => ({docData:state.docData,twoDimData:state.twoDimData,daosDataList1:state.daosDataList1}),  //  daosDataList: state.daosDataList获取 数据处理页面列表，没有传入曲线数据前，获取的是 道列表，也就是默认模板
  {}      
)(TwoDim2Echarts);

